<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>智能人数计算系统</title>


    <style>

  

            h1{
              color:#ff8eb3;
           text-align:center;
        font-size: 70px;
        
            }
            h2{
              color:green;
              font-size: 50px;
        
        
            }
            p{
            color:#ff8eb3;
           text-align:center;
              font-size: 25px;
        
        
            }
            span{
        
                font-size: 35px;
        
            }
           
        
                .af {
                    width: 400px;
                    height: 200px;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                    display: inline-block;
                    margin: 20px;
                    text-align: center;
                    font-size: 50px;
                    color: #fff;
                    background: #ff8eb3;
                    margin: 0 100px;
                    margin-top: 150px;
                }
                /*.af:hover{
                    opacity: 0.8;
                }*/
                .title {
                    font-size: 60px;
                    color: #ff8eb3;
                    margin-bottom: 30px;
                }
        
                #inp {
                    width: 100%;
                    height: 100px;
                    font-size: 50px;
                    margin-top: 100px;
                    border-top: none;
                    border-left: none;
                    border-right: none;
                    border-bottom: 3px solid #ff8eb3;
                    color: #ff8eb3;
                }
          #touch {
            width: 60px;
            height: 60px;
            position: absolute;
            left: 300px;
            top: 79px;
            margin-left: -30px;
            margin-top: -30px;
            z-index: 999999;
        }
        
        
        
        
        #simple-menu {
            width: 60px;
            height: 60px;
            cursor: move;
        }
          </style>
          <style lang="scss" scoped>
        
            .wave-mask {
                position: absolute;
                width: 200px;
                height: 200px;
                top: 10px;
                left: 55%;
                border-radius: 40%;
                background-color: rgba(212, 24, 24, 0.9);
                transform: translate(-50%, -70%) rotate(0);
                animation: toRotate 10s linear -5s infinite;
                z-index: 20;
            }
        
            @keyframes toRotate {
                50% {
                    transform: translate(-50%, -70%) rotate(180deg);
                }
        
                100% {
                    transform: translate(-50%, -70%) rotate(360deg);
                }
            }
        
            .container {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 3px solid #67c23a;
                background: #ffffff;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                padding: 5px;
            }
        
            .wave {
                position: relative;
                width: 100px;
                height: 100px;
                background-image: linear-gradient(-180deg, #aaff80 13%, #67c23a 91%);
                border-radius: 50%;
            }
        
            .container {
                overflow: hidden;
            }
        
            .wave-mask {
                background-color: rgba(255, 255, 255, 0.9);
            }
        </style>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>
    
</head>
<body>


    <img class="logo" src="http://www.tedu.cn/zhuzhan/img/logo.png" alt="logo">

        <h1>物联网实训室</h1>
        <iframe width="60%" src="http://192.168.31.14/" align="right" marginheight="35px" height="350" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></iframe>
        <span>当前屋内人数：</span>
        <span id="dqrs"></span>
        
        <p></p>
        
        <span>今日人流量：</span>
        <span id="dtrs"></span>
        <p></p>
        <span>当月人流量：</span>
        <span id="dyrs"></span>
        
        <p></p>
        
        <span>总流量：</span> 
        <span id="xtrs"></span>
        
        <p></p>
        <span id="cs"></span>
        
        
        
        
        
        
        
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:400px;"></div>

    <p>

    </p>
    <div id="main2" style="width: 800px;height:400px;"></div>

    <p>by:物联网协会</p>
    <p>联系邮箱：hhyfmk@gmail.com</p>

    <script type="text/javascript">



function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
if (win && !window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}





            var int=self.setInterval("clock()",10000);
            function clock()
            {
       
                var option = {
            
                 



            title: {
                text: '月份人数统计'
            },
            tooltip: {},
            legend: {
                data:['人数']
            },
            xAxis: {
                data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
            },
            yAxis: {},
            series: [{
                name: '',
                type: 'bar',
                data: [a, b, c, d, e, f,g,h,i,j,k,l]
            }]
        };

        var option2 = {
            title: {
                text: '历年人数统计'
            },
            tooltip: {},
            legend: {
                data:['']
            },
            xAxis: {
                data: ["去年","今年"]
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                data: [qns,jns]
            }]
        };
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
        var myChart = echarts.init(document.getElementById('main2'));
        myChart.setOption(option2);
        
            
               ss();
               sss();
               ssss();
               sssss();
            
                function ss(){
                var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                            document.getElementById("dqrs").innerHTML = xmlhttp.responseText;
                          
            
                        }
            
                    }
                
                    xmlhttp.open("GET", "/people?people=" +"dqrs");
                    xmlhttp.send();
                }
            
            
                function sss(){
                    var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                            document.getElementById("dtrs").innerHTML = xmlhttp.responseText;
                          
            
                        }
            
                    }
                   
                    xmlhttp.open("GET", "/people?people=" +"dtrs");
                    xmlhttp.send();
            
            
                }
                function ssss(){
                    var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                            document.getElementById("dyrs").innerHTML = xmlhttp.responseText;
                          
            
                        }
            
                    }
                   
                    xmlhttp.open("GET", "/people?people=" +"dyrs");
                    xmlhttp.send();
            
            
                }
                function sssss(){
                    var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                            document.getElementById("xtrs").innerHTML = xmlhttp.responseText;
                          
            
                        }
            
                    }
                   
                    xmlhttp.open("GET", "/people?people=" +"xtrs");
                    xmlhttp.send();
            
            
                }
            
            
            
            }
            
            
            var a,b,c,d,e,f,g,h,i,j,k,l;
        var qns,jns;

        as();bs();cs();ds();es();fs();gs();hs();is();gs();ks();ls();qnrss();jnrss();
      
//a
       function as(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            ha(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"1");
                    xmlhttp.send(); 
                }              
                function ha(html){
                        a=parseInt(html);
                    }
//b
                    function bs(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hb(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"2");
                    xmlhttp.send(); 
                }              
                function hb(html){
                        b=parseInt(html);
                    }
//c
                    function cs(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hc(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"3");
                    xmlhttp.send(); 
                }              
                function hc(html){
                        c=parseInt(html);
                    }
  //d         
                    function ds(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hd(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"4");
                    xmlhttp.send(); 
                }              
                function hd(html){
                        d=parseInt(html);
                    }
//e
                    function es(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            he(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"5");
                    xmlhttp.send(); 
                }              
                function he(html){
                        e=parseInt(html);
                    }
 //f           
                    function fs(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hf(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"6");
                    xmlhttp.send(); 
                }              
                function hf(html){
                        f=parseInt(html);
                    }
 //g           
                    function gs(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hg(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"7");
                    xmlhttp.send(); 
                }              
                function hg(html){
                        g=parseInt(html);
                    }
 //h           
                    function hs(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hh(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"8");
                    xmlhttp.send(); 
                }              
                function hh(html){
                        h=parseInt(html);
                    }
//i
                    function is(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hi(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"9");
                    xmlhttp.send(); 
                }              
                function hi(html){
                        i=parseInt(html);
                    }
  //j          
                    function js(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hj(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"10");
                    xmlhttp.send(); 
                }              
                function hj(html){
                        j=parseInt(html);
                    }
     //k
     function ks(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hk(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"11");
                    xmlhttp.send(); 
                }              
                function hk(html){
                        k=parseInt(html);
                    }
        //l
        function ls(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hl(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"12");
                    xmlhttp.send(); 
                }              
                function hl(html){
                        l=parseInt(html);
                    }
                       
            //qn
            function qnrss(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            r1(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"qnrs");
                    xmlhttp.send(); 
                }              
                function r1(html){
                    qns=parseInt(html);
                    }
            //jn
            function jnrss(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            r2(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"jnrs");
                    xmlhttp.send(); 
                }              
                function r2(html){
                    jns=parseInt(html);
                    }
            














            
            </script>
    
   
    
</body>
</html>